<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  const action = reactive({
    RankStat:{} as any,
    RewardStat:[]
  })
  const getList = async()=> {
    const loading = Toastloading()
    const RankStat = await statisticsApi.gameRankStat()
    const RewardStat = await statisticsApi.gameRankRewardStat()
    action.RankStat = RankStat.data || {}
    action.RewardStat = RewardStat.data || []
    loading.close()
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <el-descriptions
        title="娱乐等级整体数据"
        :column="9"
        border
        direction="vertical"
        class="xm-TableCenter"
      >
        <el-descriptions-item label="侠客">{{ action.RankStat.rank_1 }}</el-descriptions-item>
        <el-descriptions-item label="大侠">{{ action.RankStat.rank_2 }}</el-descriptions-item>
        <el-descriptions-item label="掌门">{{ action.RankStat.rank_3 }}</el-descriptions-item>
        <el-descriptions-item label="宗师">{{ action.RankStat.rank_4 }}</el-descriptions-item>
        <el-descriptions-item label="盟主">{{ action.RankStat.rank_5 }}</el-descriptions-item>
        <el-descriptions-item label="国王">{{ action.RankStat.rank_6 }}</el-descriptions-item>
        <el-descriptions-item label="大帝">{{ action.RankStat.rank_7 }}</el-descriptions-item>
        <el-descriptions-item label="天神">{{ action.RankStat.rank_8 }}</el-descriptions-item>
        <el-descriptions-item label="天尊">{{ action.RankStat.rank_9 }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="el-descriptions__title xm-mb10">娱乐等级奖励下发明细</div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.RewardStat"
      border>
      <el-table-column min-width="120" prop="rank_name" label="等级名称">
        <template #default="scope">
          {{ scope.row.rank_name }}{{ scope.row.level }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="userNum" label="达成等级人数" />
      <el-table-column min-width="120" prop="rewardNum" label="礼物领取人数" />
      <el-table-column min-width="120" prop="giftTotal" label="礼物总价值" />
    </el-table>
  </div>
</template>